<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ajax文件</title>
</head>
<body>
	<!-- 知识点：1、ajax是前端js知识点所以要在html文件中，并且只有在服务器环境中才会生效
		   2、ajax代码需要写在script标签之内
		   3、ajax属于对象的一种，因此他有许多的方法
		   4、ajax是浏览器的代理人，帮助浏览器实现和服务器端的请求和响应 
		   5、请求参数位置问题：将请求参数传到ajax内部，在函数内部根据请求方式的不同将请求参数放到不同位置
		   					get请求参数放在请求地址后
		   					post请求参数放在send方法中
		   6、请求参数格式问题：（1）表单格式 aplication/x-www.form-urlencoded   参数名称=参数值&参数名称=参数值
		   					  (2)json格式 aplication/json    {name:"zhnagsan",age:20}
		   					     传递对象数据类型对于函数调用的使用者更加友好
		   					     在函数内部对象数据类型转换成字符串类型更加方便					




		-->



<script type="text/javascript">
	// 将ajax进行函数封装
	function ajax(options){
		// 存储的是默认值
		var defaults={
			type:"get",
			url:"",
			data:{},
			header:{
				"Content-Type":"aplication/json"
			},
			success:function(){},
			error:function(){},
		}
		// 使用options对象中的属性覆盖defaults对象中的属性
		Object.assign(defaults,options);

	

		// 第一：创建ajax对象（使用js中XMLHttpRequest的构造函数）
	var xhr= new XMLHttpRequest();
	// 处理并且拼接请求参数
	var params="";
	// 循环用户传入的对象类型格式的参数（for in）
	for (var attr in defaults.data) {
		// 将参数转换成字符串形式
		params +=attr + "="+defaults.data[attr]+"&";
	}
	// 将拼接好的参数是、中最后一个多余的&号截掉，结构从新赋值回去
	params = params.substr(0,params.length-1);
	// console.log(params);


	// 第二：配置ajax对象，告诉他要以什么方式向那个地址发生请求
	// 判断请求方式
	if (defaults.type=="get") {
		xhr.open(defaults.type, defaults.url+"?"+params);
	}else {
		xhr.open(defaults.type, defaults.url);
	}
	


	// 第三：发送请求（这里相当于请求报文）
	
	// 如果请求方式是post
	if (defaults.type=="post") {
		// 用户希望的向服务器端传递的请求参数的类型
		var contentType=defaults.header["Content-Type"];
		// 设置请求参数格式类型
		xhr.setRequestHeader("Content-Type", contentType);
		// 判断用户希望的请求参数的格式类型
		// 如果类型是json格式
		if (contentType=="aplication/json") {
			xhr.send(JSON.stringify(defaults.data));

		}else {
			// 向服务器端传递普通类型的请求参数
			xhr.send(params);
		}
		

	}else {
		xhr.send();
	}



	// 第四：监听xgr下面的onload事件，当xhr对象接受完响应数据后触发（因为这里发出请求到接受完成数据是需要时间的所以是异步的）
	xhr.onload=function (){

		// 获取响应头中的数据
		var ContentType = xhr.getResponseHeader("Content-Type");
		// 服务器端响应回来的数据
		 responseText = xhr.responseText;
		// 如果响应类型中包含aplication/json
		if (ContentType.includes("aplication/json")) {
			// 将json字符串转化成json对象
			responseText = JSON.parse(responseText);
		}



		// 当http状态码等于200时候
		if (xhr.status==200) {
			// 请求成功 调用处理成功情况的函数
			defaults.success(responseText,xhr);
		}else {
			// 请求失败 调用处理失败情况的函数
			defaults.error(responseText,xhr);
		}
		// console.log(xhr.responseText);
		

	}

	}
	
	// 调用前面封装的ajax函数
	ajax({
		// type:"post",
		url:"http://localhost:3000/ajax02",

		success:function (data){
			console.log("这里是success函数");
			console.log(responseText);

		}

	});






</script>



</body>
</html>